<!DOCTYPE html>
<!--
 Copyright 2023 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<html>
  <head>
    <title>Reverser</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <style>
      #container {
        font-family: sans-serif;
        max-width: 60rem;
        margin-left: auto;
        margin-right: auto;
      }

      #content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-bottom: 2rem;
      }

      #content h1 {
        font-size: 1.6rem;
        margin: 0.5rem;
      }

      #text {
        border: 1pt solid black;
        min-width: 40ch;
        max-width: 40ch;
        height: 10rem;
        padding: 0.5ch;
      }

      #reversed {
        border: 1pt solid black;
        width: 40ch;
        min-height: 10rem;
        margin: 0;
        padding: 0.5ch;
        background-color: #f5f6fa;

        /* https://stackoverflow.com/a/248013 */
        white-space: pre-wrap;       /* Since CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
      }

      #credits {
        text-align: center;
        font-size: 0.8rem;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id=content>
        <div>
          <h1>Text</h1>
          <textarea id="text" placeholder="Enter text here..."></textarea>
        </div>
        <div>
          <h1>Reversed Text</h1>
          <pre id="reversed"></pre>
        </div>
      </div>
      <div id="credits">
        🧶 Brought to you by <a href="https://serviceweaver.dev/">Service Weaver</a>.
        💻 <a href="https://github.com/ServiceWeaver/weaver/tree/main/examples/reverser">Source Code</a>.
      </div>
    </div>

    <script>
      async function reverse(s) {
        const response = await fetch(`/reverse?s=${encodeURIComponent(s)}`);
        return await response.text();
      }

      function main() {
        const text = document.getElementById('text');
        const reversed = document.getElementById('reversed');
        text.addEventListener('input', () => {
          reverse(text.value).then((s) => {
            reversed.innerHTML = s;
          });
        });
      }

      document.addEventListener('DOMContentLoaded', main);
    </script>
  </body>
</html>
